<template>
  <div class="platform-mode">
    <div class="platform-mode_view">
      <div class="platform-mode__menu">
        <div
          :class="[
            'platform-mode__menu__view',
            item.id === pmActive && 'platform-mode__menu__view--active'
          ]"
          v-for="item in platformModeData"
          :key="item.name"
          @click="menuChange(item)"
        >
          <img
            v-show="item.id === pmActive"
            class="menu-icon"
            :src="item.icon2"
            alt=""
          />
          <img
            v-show="item.id !== pmActive"
            class="menu-icon"
            :src="item.icon"
            alt=""
          />
          <div class="menu-center">
            <h3>{{ item.name }}</h3>
            <p>{{ item.illustrate }}</p>
          </div>
          <div v-show="item.id === pmActive" class="triangle"></div>
        </div>
      </div>
      <div class="menu-solution">
        <div v-if="pmActive === 0" class="solution__name">
          <h1>{{ pmDetails.name }}</h1>
          <img :src="pmDetails.headerImg" alt="" />
        </div>
        <template v-if="pmDetails.type === 'video'">
          <video class="video-area" autoplay alt="" loop>
            <source :src="pmDetails.contentImg" type="video/mp4" />
            Your browser does not support the video tag.
          </video>
        </template>
        <template v-else>
          <img :src="pmDetails.contentImg" alt="" />
        </template>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { platformModeData } from '../constants';
const pmActive = ref<number>(0);
const pmDetails = ref<any>(platformModeData[0].details);
const menuChange = (item: any) => {
  pmActive.value = item.id;
  pmDetails.value = item.details;
};
onMounted(() => {
  const video: any = document.querySelector('video');
  console.log('---------', video);
  video?.play();
});
</script>
<style lang="scss" scoped>
.platform-mode {
  height: 938px;
  width: 100%;
  .platform-mode_view {
    width: 1280px;
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
    padding-top: 140px;
    .platform-mode__menu {
      position: absolute;
      left: 0;
      top: -70px;
      display: flex;
      box-shadow: 5px 4px 25px 0px rgba(164, 159, 159, 0.15);
      border-radius: 8px 8px 8px 8px;
      background-color: #fff;
    }
  }
}
.platform-mode__menu__view {
  flex:1;
  height: 140px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 0 0 48px;
  cursor: pointer;
  position: relative;

  .menu-icon {
    height: 45px;
    width: 45px;
    margin-right: 20px;
  }
  .menu-center {
    box-sizing: border-box;
    padding-right: 15px;
    border-right: 1px solid #dfe1e6;
  }
  h3 {
    font-size: 22px;
    color: #172b4d;
    margin-bottom: 10px;
  }
  p {
    font-size: 14px;
    color: #6b778c;
  }
  .triangle {
    position: absolute;
    bottom: -40px;
    left: 190px;
    width: 0;
    height: 0;
    border-width: 20px; /* 控制三角形大小 */
    border-style: solid;
    border-color: #1678ff transparent transparent transparent; /* 设置颜色为黑色 */
  }
}
.platform-mode__menu__view:nth-child(1) {
  border-radius: 8px 0 0 8px;
}
.platform-mode__menu__view:nth-child(3) {
  border-radius: 0 8px 8px 0;
  .menu-center {
    border-right: 0;
  }
}
.platform-mode__menu__view--active {
  background-color: #1678ff;
  .menu-center {
    border-right: 1px solid #1678ff;
  }
  h3 {
    color: #fff;
  }
  p {
    color: #fff;
  }
}
.menu-solution {
  margin: 0 auto;
  text-align: center;
  .solution__name {
    height: 76px;
    position: relative;
    margin-bottom: 17px;
    text-align: center;
    img {
      margin: 0 auto;
    }
    h1 {
      width: 100%;
      position: absolute;
      text-align: center;
      line-height: 76px;
      font-size: 36px;
      color: #172b4d;
      text-align: center;
    }
  }
}
.video-area {
  position: absolute;
  left: 0;
  top: 140px;
  z-index: -1;
  width: 100%;
  height: 773px;
  transform: scale(1.5);
}
</style>
